<!--
 * @Author: your name
 * @Date: 2020-03-21 18:37:45
 * @LastEditTime: 2020-05-20 14:14:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \museweb\src\views\musePage\recommendation\changeRecommendation.vue
 -->
<template>
    <d2-container>
        <el-row>
            <el-col :lg="12">
                <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                    <el-form-item label="标题" prop="title">
                        <el-input placeholder="标题" v-model="detailForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="子标题" prop="subtitle">
                        <el-input placeholder="子标题" v-model="detailForm.subtitle"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-select style="width:100%;" v-model="detailForm.type" placeholder="请选择展示类型">
                            <el-option
                                    v-for="item in recommendType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品" prop="productName" v-if="detailForm.type === 'product'">
                        <el-input placeholder="商品" v-model="detailForm.productName" readonly @focus="fnOpenPopup"></el-input>
                    </el-form-item>
                    <el-form-item label="门店" prop="storeName" v-if="detailForm.type === 'store'">
                        <el-input placeholder="商品" v-model="detailForm.storeName" readonly @focus="fnOpenPopup"></el-input>
                    </el-form-item>
                    <el-form-item label="展示页面" prop="page">
                        <el-select style="width:100%;" multiple v-model="detailForm.page" placeholder="请选择展示页面">
                            <el-option
                                    v-for="item in pageAry"
                                    :key="item.value"
                                    :label="item.label"
                                    :disabled="item.disabled"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item disabled label="有效期" v-if="false">
                        <el-date-picker
                                v-model="detailForm.expries"
                                style="width: 100%"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="链接" prop="refLink">
                        <museLink v-model="detailForm.refLink" :type="detailForm.type"></museLink>
                    </el-form-item>
                    <el-form-item label="缩略图" v-if="false">
                        <el-upload
                                class="avatar-uploader"
                                :http-request="handleAvatarSuccess"
                                :show-file-list="false">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="轮播图" prop="images">
                        <banner v-model="detailForm.images"></banner>
                    </el-form-item>
                    <el-form-item label="详情" prop="detail">
                        <simpleRich v-model="detailForm.detail"></simpleRich>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                        <el-button @click="resetForm('detailForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-dialog :title="detailForm.type === 'product'?'商品列表':'门店列表'" :visible.sync="dialogDataVisible">
            <el-table :data="tableData"
                      width="100%"
                      ref="ref_table"
                      highlight-current-row
                      @current-change="handleRadioTable">
                <el-table-column prop="name" label="名称"/>
                <el-table-column prop="brief" label="简介">
                    <template slot-scope="{row: {brief}}">
                        <span>{{brief | subStr(10)}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fnClosePopup">取 消</el-button>
                <el-button type="primary" @click="fnSaveChoosed">确 定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
  import simpleRich from '@/components/muse/simple-rich/simple-rich'
  import banner from '@/components/muse/banner/banner'
  import museLink from '@/components/muse/muse-link/muse-link'
  import tableMixin from '../mixins/tableMixin'
  import uploadMixin from '../mixins/uploadMixin'
  import { pageAry, recommendType } from '@/config/common.data'
  // import { changeRecommendation, getOneRecommendation, getProductList, getStoreList } from '@/api/admin'
  export default {
    name: 'changeRecommendation',
    components: {
      simpleRich,
      banner,
      museLink
    },
    mixins: [uploadMixin, tableMixin],
    data() {
      return {
        id: '',
        oldDetailForm: {},
        detailForm: {
          title: '',
          subtitle: '',
          type: '',
          product: '',
          productName: '',
          store: '',
          storeName: '',
          images: [],
          detail: '',
          page: [],
          refLink: {}
        },
        imageUrl: '',
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          subtitle: [
            { required: true, message: '请输入副标题', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'blur' }
          ],
          productName: [
            { required: true, message: '请选择商品', trigger: 'blur' }
          ],
          storeName: [
            { required: true, message: '请选择门店', trigger: 'blur' }
          ],
          detail: [
            { required: true, message: '请输入详情', trigger: 'blur' }
          ],
          images: [
            { required: true, message: '请输入图片', trigger: 'blur' }
          ],
          refLink: [
            { required: true, message: '请输入链接', trigger: 'blur' }
          ],
          page: [
            { required: true, message: '请选择展示页面', trigger: 'blur' }
          ]
        },
        recommendType,
        pageAry: pageAry,
        tableData: [],
        choosedDataObj: {},
        dialogDataVisible: false
      }
    },
    created () {
      this.id = this.$route.query.id
      if(this.id) {
        this.getOneRecommendation()
      }
    },
    methods: {
      // 得到详情
      async getOneRecommendation() {
        const res = await getOneRecommendation({id: this.id})
        this.detailForm = res.data
        if(this.detailForm.type === 'product') {
          this.detailForm.productName = this.detailForm.product.name
        } else {
          this.detailForm.storeName = this.detailForm.store.name
        }
        this.$nextTick(() => {
          this.detailForm.refLink = this.detailForm.refLink[0]
        })

        console.log(123123, this.detailForm)
      },
      // 单图片上传
      async handleAvatarSuccess(file, type, index) {
        const url = await this.fnUpload(file)
        this.imageUrl = url
      },
      // 表单提交
      submitForm (formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.detailForm.refLink = [this.detailForm.refLink]
            if(this.id) {
              this.detailForm['id'] = this.id
              if(this.detailForm.type === 'product') {
                this.detailForm.product = this.detailForm.product._id
              } else {
                this.detailForm.store = this.detailForm.store._id
              }
            }
            const res = await changeRecommendation(this.detailForm)
            this.$router.push({name: 'recommendationList'})
          } else {
            return false;
          }
        });
      },
      // 表单重置
      resetForm (formName) {
        this.$nextTick(() => {
          this.detailForm.refLink = ''
          this.detailForm.detail = ''
        })
        this.$refs[formName].resetFields()
      },
      // 打开商品弹框
      fnOpenPopup () {
        this.dialogDataVisible = true
        this.tableData = []
        this.paging = {
          total: 0,
          page: 1
        }
        this.getTableData()
      },
      fnClosePopup () {
        this.dialogDataVisible = false
        this.choosedDataObj = {}
      },
      // 获得商品列表
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        
        const { code, data: { total, currentPage, data, pageSize } } = this.detailForm.type=== 'product' ? await getProductList(params) :  await getStoreList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = data
      },
      handleRadioTable(value) {
        this.choosedDataObj = value
      },
      fnSaveChoosed () {
        this.detailForm.product = ''
        this.detailForm.productName = ''
        this.detailForm.store = ''
        this.detailForm.storeName = ''
        if(this.detailForm.type === 'product') {
          this.detailForm.product = this.choosedDataObj._id
          this.detailForm.productName = this.choosedDataObj.name
        } else {
          this.detailForm.store = this.choosedDataObj._id
          this.detailForm.storeName = this.choosedDataObj.name
        }
        this.fnClosePopup()
      }
    }
  }
</script>

<style scoped>
    .from_width {
        width: 40%;
    }
</style>
